<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Ball on an Accelerating Inclined Plane</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';

    // Parameters
    const centerX = canvas.width / 2;
    const baseY = 320;
    const wedgeBase = 300;
    const wedgeHeight = 170; // This gives an angle of approximately 29.5 degrees
    const wedgeRightX = 420;
    const wedgeLeftX = wedgeRightX - wedgeBase;
    const wedgeTopY = baseY - wedgeHeight;

    const P1 = { x: wedgeRightX, y: baseY }; // Bottom-right vertex
    const P2 = { x: wedgeLeftX, y: baseY }; // Bottom-left vertex
    const P3 = { x: wedgeLeftX, y: wedgeTopY }; // Top-left vertex

    // Calculate the angle of inclination
    const theta = Math.atan2(wedgeHeight, wedgeBase);

    // 1. Draw Ground
    ctx.fillStyle = '#f0f0f0'; // Light grey for the ground surface
    ctx.fillRect(0, baseY, canvas.width, canvas.height - baseY);
    ctx.beginPath();
    ctx.moveTo(0, baseY);
    ctx.lineTo(canvas.width, baseY);
    ctx.stroke();

    // 2. Draw Wedge (Inclined Plane)
    ctx.beginPath();
    ctx.moveTo(P1.x, P1.y);
    ctx.lineTo(P2.x, P2.y);
    ctx.lineTo(P3.x, P3.y);
    ctx.closePath();
    ctx.stroke();

    // 3. Draw Angle Label (θ)
    ctx.beginPath();
    ctx.arc(P1.x, P1.y, 40, Math.PI, Math.PI - theta, true); // Arc from horizontal to incline
    ctx.stroke();
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('θ', P1.x - 55, P1.y - 15);

    // 4. Draw Ball (Sphere)
    const ballRadius = 20;
    // Position the ball's contact point on the incline
    const contactPointX = wedgeLeftX + 180;
    const contactPointY = baseY - (P1.x - contactPointX) * Math.tan(theta);
    // Calculate ball's center based on contact point and radius
    const ballCenterX = contactPointX + ballRadius * Math.sin(theta);
    const ballCenterY = contactPointY - ballRadius * Math.cos(theta);
    
    // Create a radial gradient for a 3D/shiny effect on the ball
    const gradient = ctx.createRadialGradient(
        ballCenterX - ballRadius * 0.4, 
        ballCenterY - ballRadius * 0.4, 
        ballRadius * 0.1, 
        ballCenterX, 
        ballCenterY, 
        ballRadius
    );
    gradient.addColorStop(0, '#ffffff');
    gradient.addColorStop(0.7, '#c0c0c0');
    gradient.addColorStop(1, '#606060');

    ctx.beginPath();
    ctx.arc(ballCenterX, ballCenterY, ballRadius, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.stroke();

    // 5. Draw Post and String
    const postContactX = wedgeLeftX + 75;
    const postContactY = baseY - (P1.x - postContactX) * Math.tan(theta);
    const postHeight = 25;
    const postTopX = postContactX + postHeight * Math.sin(theta);
    const postTopY = postContactY - postHeight * Math.cos(theta);
    
    // Draw the T-shaped post
    ctx.save();
    ctx.lineWidth = 2;
    // Stem of the T
    ctx.beginPath();
    ctx.moveTo(postContactX, postContactY);
    ctx.lineTo(postTopX, postTopY);
    ctx.stroke();
    // Crossbar of the T, making it thicker to represent a plate
    ctx.lineWidth = 4;
    ctx.translate(postTopX, postTopY);
    ctx.rotate(-theta);
    ctx.beginPath();
    ctx.moveTo(-15, 0);
    ctx.lineTo(15, 0);
    ctx.stroke();
    ctx.restore();

    // Draw the String connecting the ball to the post
    const stringBallX = ballCenterX - ballRadius * Math.cos(theta);
    const stringBallY = ballCenterY - ballRadius * Math.sin(theta);
    
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.moveTo(stringBallX, stringBallY);
    ctx.lineTo(postContactX, postContactY);
    ctx.stroke();
    
    // Restore default line width
    ctx.lineWidth = 2;

    // 6. Draw Acceleration Vector (a)
    const arrowY = wedgeTopY + (baseY - wedgeTopY) * 0.4;
    const arrowLineX = P3.x - 40;
    const arrowStartX = arrowLineX;
    const arrowEndX = arrowLineX - 60;
    
    ctx.beginPath();
    // Vertical bar at the origin of the vector
    ctx.moveTo(arrowLineX, arrowY - 20);
    ctx.lineTo(arrowLineX, arrowY + 20);
    // Horizontal arrow shaft
    ctx.moveTo(arrowStartX, arrowY);
    ctx.lineTo(arrowEndX, arrowY);
    // Arrowhead
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX + 10, arrowY - 6);
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX + 10, arrowY + 6);
    ctx.stroke();
    
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('a', arrowStartX + 5, arrowY - 25);

    // 7. Draw the Figure Title
    ctx.font = '24px KaiTi';
    ctx.textAlign = 'center';
    ctx.fillStyle = 'black';
    ctx.fillText('习题 1-41 图', centerX, baseY + 60);

</script>
</body>
</html>